<template>
  <div class="editPage">
    <div class="top">
      <TopNav title="编辑资料" @jumpPage="$router.push('/personal')" />
      <div class="userImg" v-if="userInfo.nickname">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          class="img"
          ref="img"
          alt
        />
        <img v-else src="../../assets/w1.gif" alt class="img" ref="img" />
        <!-- 预览图片后上传图片 -->
        <van-uploader :after-read="afterRead" class="afterRead" />
      </div>
    </div>
    <div>
      <PersonalCell
        label="昵称"
        :desc="userInfo.nickname"
        type="text"
        @clickJump="isShowNick = true"
      />
      <PersonalCell label="密码" desc="******" @clickJump="isShowPwd = true" />
      <PersonalCell
        label="性别"
        :desc="userInfo.gender === 1 ? '男' : '女'"
        @clickJump="isShowGender = true"
      />
      <PersonalCell label="确定" @clickJump="$router.push('/personal')" />
      <!-- 弹窗+输入框修改昵称 -->
      <van-dialog
        v-model="isShowNick"
        title="我的昵称"
        show-cancel-button
        @confirm="editNickname"
        @cancel="newNickname = ''"
      >
        <van-field v-model="newNickname" placeholder="请输入新的昵称" />
      </van-dialog>
      <!-- 弹窗+输入框修改密码 -->
      <van-dialog
        v-model="isShowPwd"
        title="我的密码"
        show-cancel-button
        @confirm="editPassword"
        @cancel="newPassword = ''"
      >
        <van-field
          v-model="newPassword"
          placeholder="请输入新的密码"
          type="password"
        />
      </van-dialog>
      <!-- 动作面板修改性别 -->
      <van-action-sheet
        v-model="isShowGender"
        :actions="genderList"
        @select="onSelect"
        cancel-text="不想选了"
      />
    </div>
  </div>
</template>

<script>
// 导入子组件
import PersonalCell from "../../components/PersonalCell";
import TopNav from "../../components/TopNav";
export default {
  data() {
    return {
      userInfo: {},
      isShowNick: false,
      newNickname: "",
      isShowPwd: false,
      newPassword: "",
      isShowGender: false,
      genderList: [
        {
          name: "男",
          genderNum: 1,
        },
        {
          name: "女",
          genderNum: 0,
        },
      ],
      imgUrl: "",
    };
  },
  // 注册子组件
  components: {
    PersonalCell,
    TopNav,
  },
  mounted() {
    // 挂载就回显数据
    this.updatePage();
  },
  methods: {
    // 编辑修改昵称后发送请求更新个人页面信息
    editNickname() {
      // 根据正则判断输入内容的合法性:匹配3-6位的汉字或字母或数字的正则
      const rule = /^[\u4e00-\u9fa5_\w]{2,6}$/;
      if (rule.test(this.newNickname)) {
        this.edit({
          nickname: this.newNickname,
        });
      } else {
        // 提示格式不对
        this.$toast.fail("修改无效,请输入的正确的昵称的格式");
        return;
      }
      // 隐藏弹出框后清空输入框内容
      this.newNickname = "";
    },
    // 编辑修改密码后发送请求
    editPassword() {
      if (!this.newPassword) {
        // 提示密码不能为空
        this.$toast.fail("密码不能为空");
        return;
      }
      this.edit({
        password: this.newPassword,
      });
      // 隐藏弹出框后清空输入框内容
      this.newPassword = "";
    },
    // 获取性别数据及修改
    onSelect(genderData) {
      // 返回点击内容的对象:性别及对应的编号
      // console.log(genderData);
      // 发送请求更新页面数据
      this.edit({
        gender: genderData.genderNum,
      });
      // 手动隐藏动作面版
      this.isShowGender = false;
    },
    // 修改发送请求部分封装函数
    edit(dataObj) {
      // 确定按钮后获取修改的昵称
      // console.log(this.newNickname);
      // 发送请求
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        data: dataObj,
      })
        .then((res) => {
          // console.log(res);
          if (res.data.message === "修改成功") {
            // 更新个人中心页面
            this.updatePage();
            return;
          }
        })
        .catch((err) => {
          console.dir(err);
          // 弹窗提示
          this.$toast.fail("系统错误");
        });
    },
    // 封装更新个人中心页面函数
    updatePage() {
      // 发送请求获取数据
      this.$axios({
        method: "get",
        url: "/user/" + localStorage.getItem("userId"),
      })
        .then((res) => {
          // console.log("编辑回显", res);
          if (res.data.message === "获取成功") {
            // 响应的数据存储本地的data
            this.userInfo = res.data.data;
            return;
            // console.log("数据绑定了吗", this.userInfo);
          }
        })
        .catch((err) => {
          console.dir(err);
          // 弹窗提示
          this.$toast.fail("系统错误");
        });
    },
    // 图片预览
    afterRead(item) {
      // console.log(item);
      // 使用FormData处理图片上传
      const formData = new FormData();
      // 加入获取的文件对象属性
      formData.append("file", item.file);
      // 发送请求进行图片预览
      this.$axios({
        method: "post",
        url: "/upload",
        data: formData,
      })
        .then((res) => {
          // console.log(res);
          if (res.data.message === "文件上传成功") {
            // 修改图片地址
            // this.imgUrl = this.$axios.defaults.baseURL + res.data.data.url;
            // XXXC多余的步骤：根据定义的ref获取src属性修改图片
            // this.$refs.img.src = this.imgUrl;
            // 发送请求修改服务器的图片数据
            this.edit({
              head_img: res.data.data.url,
            });
          }
        })
        .catch((err) => {
          console.dir(err);
          // 弹窗提示
          this.$toast.fail("系统错误");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.editPage {
  .top {
    // display: flex;
    // flex-direction: column;
    // align-items: center;

    .userImg {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 10/360 * 100vw;
      img {
        position: absolute;
        width: 70/360 * 100vw;
        height: 70/360 * 100vw;
        border-radius: 50%;
        // 不让图片变形
        object-fit: cover;
      }
      .afterRead {
        width: 70/360 * 100vw;
        height: 70/360 * 100vw;
        opacity: 0;
      }
    }
  }
}
</style>
